<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Beebud</title>
  <script src="./js/ofs.js"></script>
  <link rel="stylesheet" href="./css/beebud.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="shortcut icon" href="./logo.png" type="image/x-icon">
  <script src="./js/vue.min.js"></script>

</head>

<body>
  <div id="app">
    <header>
      <div class="header-wrapper">
        <div class="logo"><a href="./index.html"><img src="./img/logo.png" alt=""></a>
        </div>
        <div class="search-wrapper">
          <!-- <input type="text" placeholder="登录搜索更多内容">
          <?xml version="1.0" encoding="UTF-8"?><svg width="14" height="14" viewBox="0 0 48 48" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path
              d="M21 38C30.3888 38 38 30.3888 38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38Z"
              fill="none" stroke="#000" stroke-width="4" stroke-linejoin="round" />
            <path d="M26.657 14.3431C25.2093 12.8954 23.2093 12 21.0001 12C18.791 12 16.791 12.8954 15.3433 14.3431"
              stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M33.2216 33.2217L41.7069 41.707" stroke="#000" stroke-width="4" stroke-linecap="round"
              stroke-linejoin="round" />
          </svg> -->
        </div>

        <div class="nav-wrapper">
          <span><a href="./about.html">关于我们</a> </span>
          <span><a href="./goodsList.html">商品列表</a> </span>
          <span><a href="./ruzhu.html">商家入驻</a> </span>
          <span><a href="./concatUs.html">联系我们</a> </span>
          <span><a href="./help.html" class="help-a">服务与帮助</a> </span>
        </div>
        <div class="login-register">
          <span><a href="./register.html">注册</a></span>
          <button><a href="./login.html">登录</a></button>
        </div>
      </div>
    </header>
    <section class="banner">
      <div class="banner-wrapper">
        <img src="./img/banner.png" alt="">
        <div class="banner-text">
          <div class="text-1">每个人都有自己的能量</div>
          <div class="text-2">即使再小的需求和兴趣，你都能得到即可满足</div>
        </div>
      </div>
    </section>
    <main>
      <div class="main-left">
        <!-- 热门推荐 -->
        <!-- <div class="hot-recommend">
          热门推荐
        </div> -->
        <!-- 点击发布 -->
        <div class="click-release">
          <a href="./publish.html">
            + 点击发布

          </a>
        </div>
      </div>
      <div class="main-right">
        <div class="filter-btns">
          <span v-for="(item, i) in labels" :key="i" @click="clickLabelHandle(i)">{{item}}</span>
        </div>
        <div class="container">
          <ul class="beebud-list">
            <li v-for="item in list">
              <a :href="'./detail.html?id='+item.id" target="_blank" rel="noopener noreferrer">
                <img :src="item.imageList[0]" alt="">
                <div class="beebud-info">
                  <div class="title">{{item.title}}</div>
                  <div class="price">￥{{item.price/100}}/{{item.unitText}}</div>
                  <div class="user-info">
                    <img :src="item.avatar" alt="" class="avatar">
                    <div class="name">{{item.nickname}}</div>
                  </div>
                </div>
              </a>
            </li>
            <div class="fb"></div>
            <div class="fb"></div>
            <div class="fb"></div>
          </ul>
        </div>
      </div>
    </main>
    <footer>
      <div class="footer-wrapper">
        <div>
          <div>
            <span>上海灼蕾网络科技有限公司</span>
            <div style="margin-left: 20px;"><a href="https://beian.miit.gov.cn" target="_blank"
                rel="noopener noreferrer">沪ICP备2024048955号</a> </div>
          </div>
          <div>
            <span>地址：上海市长宁区凯旋路1205号1号楼 三 楼 3C 室</span>
          </div>
        </div>
      </div>
    </footer>
    <!-- <div class="beebud-modal-wrapper" v-if="showLogin">
      <div class="beebud-modal">
        <div class="modal-header">
          <h3 class="title">登录 / 注册</h3>
          <span>通过未注册的手机号或第三方帐号创建Beebud帐号</span>
        </div>
        <div class="modal-body">
          <div class="phone">
            <input type="text" placeholder="手机号码" maxlength="11">
            <div class="phone-icon">
              <?xml version="1.0" encoding="UTF-8"?><svg width="20" height="20" viewBox="0 0 48 48" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M16.9961 7.68583C17.7227 7.68583 18.3921 8.07985 18.7448 8.71509L21.1912 13.1219C21.5115 13.6989 21.5266 14.3968 21.2314 14.9871L18.8746 19.7008C18.8746 19.7008 19.5576 23.2122 22.416 26.0706C25.2744 28.929 28.7741 29.6002 28.7741 29.6002L33.487 27.2438C34.0777 26.9484 34.7761 26.9637 35.3533 27.2846L39.7726 29.7416C40.4072 30.0945 40.8008 30.7635 40.8008 31.4896L40.8008 36.5631C40.8008 39.1468 38.4009 41.0129 35.9528 40.1868C30.9249 38.4903 23.1202 35.2601 18.1734 30.3132C13.2265 25.3664 9.99631 17.5617 8.29977 12.5338C7.47375 10.0857 9.33984 7.68583 11.9235 7.68583L16.9961 7.68583Z"
                  fill="none" stroke="#000" stroke-width="4" stroke-linejoin="round" />
              </svg>
            </div>

          </div>
          <div class="phone-code">
            <input type="text" placeholder="验证码">
            <button>发送验证码</button>
          </div>
          <button class="login-btn">登录</button>
        </div>
        <span class="klk-modal-close i-icon i-icon-icon-close" @click="showLogin = false">
          <svg width="24" height="24" viewBox="0 0 48 48" fill="none">
            <path d="M10 10L38 38" stroke="#ffffff" stroke-width="3.6" stroke-linecap="round"></path>
            <path d="M38 10L10 38" stroke="#ffffff" stroke-width="3.6" stroke-linecap="round"></path>
          </svg>
        </span>
      </div>

    </div>
    <div class="beebud-modal-wrapper" v-if="showRegister">
      <div class="beebud-modal">
        <div class="modal-header">
          <h3 class="title">注册</h3>
          <span>通过未注册的手机号Beebud帐号</span>
        </div>
        <div class="modal-body">
          <div class="phone">
            <input type="text" placeholder="手机号码" maxlength="11">
            <div class="phone-icon">
              <?xml version="1.0" encoding="UTF-8"?><svg width="20" height="20" viewBox="0 0 48 48" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M16.9961 7.68583C17.7227 7.68583 18.3921 8.07985 18.7448 8.71509L21.1912 13.1219C21.5115 13.6989 21.5266 14.3968 21.2314 14.9871L18.8746 19.7008C18.8746 19.7008 19.5576 23.2122 22.416 26.0706C25.2744 28.929 28.7741 29.6002 28.7741 29.6002L33.487 27.2438C34.0777 26.9484 34.7761 26.9637 35.3533 27.2846L39.7726 29.7416C40.4072 30.0945 40.8008 30.7635 40.8008 31.4896L40.8008 36.5631C40.8008 39.1468 38.4009 41.0129 35.9528 40.1868C30.9249 38.4903 23.1202 35.2601 18.1734 30.3132C13.2265 25.3664 9.99631 17.5617 8.29977 12.5338C7.47375 10.0857 9.33984 7.68583 11.9235 7.68583L16.9961 7.68583Z"
                  fill="none" stroke="#000" stroke-width="4" stroke-linejoin="round" />
              </svg>
            </div>
          </div>
          <div class="phone">
            <input type="password" placeholder="密码">
            <div class="phone-icon">
              <?xml version="1.0" encoding="UTF-8"?><svg width="20" height="20" viewBox="0 0 48 48" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M16.9961 7.68583C17.7227 7.68583 18.3921 8.07985 18.7448 8.71509L21.1912 13.1219C21.5115 13.6989 21.5266 14.3968 21.2314 14.9871L18.8746 19.7008C18.8746 19.7008 19.5576 23.2122 22.416 26.0706C25.2744 28.929 28.7741 29.6002 28.7741 29.6002L33.487 27.2438C34.0777 26.9484 34.7761 26.9637 35.3533 27.2846L39.7726 29.7416C40.4072 30.0945 40.8008 30.7635 40.8008 31.4896L40.8008 36.5631C40.8008 39.1468 38.4009 41.0129 35.9528 40.1868C30.9249 38.4903 23.1202 35.2601 18.1734 30.3132C13.2265 25.3664 9.99631 17.5617 8.29977 12.5338C7.47375 10.0857 9.33984 7.68583 11.9235 7.68583L16.9961 7.68583Z"
                  fill="none" stroke="#000" stroke-width="4" stroke-linejoin="round" />
              </svg>
            </div>
          </div>
          <div class="phone">
            <input type="password" placeholder="请输入密码">
            <div class="phone-icon">
              <?xml version="1.0" encoding="UTF-8"?><svg width="20" height="20" viewBox="0 0 48 48" fill="none"
                xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M16.9961 7.68583C17.7227 7.68583 18.3921 8.07985 18.7448 8.71509L21.1912 13.1219C21.5115 13.6989 21.5266 14.3968 21.2314 14.9871L18.8746 19.7008C18.8746 19.7008 19.5576 23.2122 22.416 26.0706C25.2744 28.929 28.7741 29.6002 28.7741 29.6002L33.487 27.2438C34.0777 26.9484 34.7761 26.9637 35.3533 27.2846L39.7726 29.7416C40.4072 30.0945 40.8008 30.7635 40.8008 31.4896L40.8008 36.5631C40.8008 39.1468 38.4009 41.0129 35.9528 40.1868C30.9249 38.4903 23.1202 35.2601 18.1734 30.3132C13.2265 25.3664 9.99631 17.5617 8.29977 12.5338C7.47375 10.0857 9.33984 7.68583 11.9235 7.68583L16.9961 7.68583Z"
                  fill="none" stroke="#000" stroke-width="4" stroke-linejoin="round" />
              </svg>
            </div>
          </div>
          <div class="phone-code">
            <input type="text" placeholder="验证码">
            <button>发送验证码</button>
          </div>
          <button class="login-btn">登录</button>
        </div>
        <span class="klk-modal-close i-icon i-icon-icon-close" @click="showLogin = false">
          <svg width="24" height="24" viewBox="0 0 48 48" fill="none">
            <path d="M10 10L38 38" stroke="#ffffff" stroke-width="3.6" stroke-linecap="round"></path>
            <path d="M38 10L10 38" stroke="#ffffff" stroke-width="3.6" stroke-linecap="round"></path>
          </svg>
        </span>
      </div>

    </div> -->
  </div>
  <script src="./js/common.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>